<template>
    <div class="app-container">
        <!-- 回款单列表 -->
        <div class="receivableSheet">
            <!-- 查询模块 -->
            <el-form :model="form" ref="form" label-width="130px" :inline="true">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="流水单号">
                            <el-input v-model="form.orderSn" placeholder="请输入流水单号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="姓名">
                            <el-input v-model="form.userName" placeholder="请输入客户姓名"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="手机号">
                            <el-input v-model="form.userPhone" placeholder="请输入客户手机号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="交易单号">
                            <el-input v-model="form.merTrace" placeholder="请输入交易单号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="支付时间" width="236">
                            <el-date-picker
                                value-format="yyyy-MM-dd HH:mm:ss"
                                v-model="dates"
                                type="daterange"
                                range-separator="-"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :default-time="['00:00:00', '23:59:59']"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="18" class="alignRight">
                        <el-form-item>
                            <el-button type="primary" @click="handleSearch">查询</el-button>
                            <el-button type="primary" @click="handleExport">导出</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <!-- 主页列表 -->
        <div class="listDiv" v-loading="tableLoading">
            <el-table :data="tableData" border style="width: 100%" ref="tableData">
                <el-table-column fixed type="index" label="序号" width="50"></el-table-column>
                <el-table-column prop="orderSn" label="流水单号"></el-table-column>
                <el-table-column prop="hospitalName" label="医院名称"></el-table-column>
                <el-table-column prop="reimbursementRatio" label="回款比率">
                    <template slot-scope="scope">{{scope.row.reimbursementRatio}}%</template>
                </el-table-column>
                <el-table-column prop="userName" label="客户姓名"></el-table-column>
                <el-table-column prop="userPhone" label="客户手机号" width="100"></el-table-column>
                <el-table-column prop="allPrice" label="扣除杂费金额"></el-table-column>
                <el-table-column prop="sundryPrice" label="杂费金额"></el-table-column>
                <el-table-column prop="merTrace" label="交易单号"></el-table-column>
                <el-table-column prop="payType" label="支付方式" width="100">
                    <template slot-scope="scope">{{scope.row.payType}}</template>
                </el-table-column>
                <el-table-column prop="bizOrderAmount" label="支付金额"></el-table-column>
                <el-table-column prop="merchantSplitAmount" label="子商户分账金额"></el-table-column>
                <el-table-column prop="comAmt" label="手续费金额"></el-table-column>
                <el-table-column prop="mmkSplitAmount" label="平台分账金额"></el-table-column>
                <el-table-column prop="createdAt" label="支付时间" width="180"></el-table-column>
            </el-table>
            <div class="pagesCon">
                <div>
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="form.pageNum"
                        :page-sizes="page_sizes"
                        :page-size="10"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="page_totals"
                    ></el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import trading from "@/api/trading";
import commonFn from "@/utils/common";
export default {
    name: "paySearch",
    data() {
        return {
            tableLoading: true,
            // 时间容器
            dates: null,
            // table列表
            tableData: [],
            // form表单
            form: {
                orderSn: "",
                userName: "",
                userPhone: "",
                merTrace:"",
                targetId:null,
                payStartTime: null,
                payEndTime: null,
                pageNum: 1,
                pageSize: 10
            },
            page_sizes: [10, 30, 50, 100], //每页显示个数
            page_totals: 60 //总条目数,
        };
    },
    filters:{
        payType(e){
            switch (e) {
                case "1":
                    return "信用卡快捷支付";
                case "2":
                    return "借记卡快捷支付";
                case "3":
                    return "微信支付";
                case "4":
                    return "支付宝支付";
            }
        }
    },
    mounted() {
        this.form.targetId = Number(this.$store.state.user.hospitalId)
        this.getList(this.form);
    },
    methods: {
        // 获取列表
        getList(e) {
            trading
                .paySearchList(e)
                .then(res => {
                    if (!res.data.code) {
                        let resData = res.data.data;
                        this.tableData = resData.list;
                        this.page_totals = resData.count;
                    } else {
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                    this.tableLoading = false;
                })
                .catch(err => {
                    this.errorStatus(err);
                    this.tableLoading = false;
                });
        },
        // 查询
        handleSearch() {
            this.form.pageNum = 1
            if (this.dates != null) {
                if (this.dates.length > 0) {
                    this.form.payStartTime = this.dates[0];
                    this.form.payEndTime = this.dates[1];
                } else {
                    this.form.payStartTime = null;
                    this.form.payEndTime = null;
                }
            } else {
                this.form.payStartTime = null;
                this.form.payEndTime = null;
            }
            this.getList(this.form);
        },
        // 导出
        handleExport() {
            let dates = { ...this.form };
            delete dates.pageNum;
            delete dates.pageSize;
            trading
                .paySearchExport(dates)
                .then(res => {
                    commonFn.downFile("线上支付", res);
                })
                .catch(err => {
                    this.errorStatus(err);
                });
        },
        // 每页显示条数
        handleSizeChange(val) {
            this.form.pageSize = val;
            this.getList(this.form);
        },
        // 当前页
        handleCurrentChange(val) {
            this.form.pageNum = val;
            this.getList(this.form);
        },
        //失败状态弹窗
        errorStatus(txt) {
            this.eleMsg(txt, "error");
        },
        //弹窗组件
        eleMsg(txt, status) {
            this.$message({
                showClose: true,
                message: txt,
                type: status
            });
        }
    }
};
</script>
<style scoped>
/* 表单样式修改 */
.el-range-editor--medium.el-input__inner {
    width: 236px;
}
/* 分页样式 */
.pagesCon {
    margin-top: 20px;
    text-align: right;
}
</style>